/*
 * @Descripttion: 创建任务组组件
 * @Author: 毕怀智
 * @Date: 2022-01-25 19:14:38
 * @Function: 该文件用途描述
 */

import styled from "@emotion/styled";
import { Button, Drawer, DrawerProps, Form, Input, Modal, Spin } from "antd";
import { useForm } from "antd/lib/form/Form";
import { useEffect } from "react";

import { useAddEpic } from "api/Epic";
import { ErrorBox } from "components/FullError";
import { useProjectIdInUrl } from "pages/projectBoard/utils";

import { useEpicsQueryKey } from "../utils";

// 创建任务组弹窗
export const CreateEpic = (
  props: Pick<DrawerProps, "visible"> & { onClose: () => void }
) => {
  const { mutate: addEpic, isLoading, error } = useAddEpic(useEpicsQueryKey());
  const [form] = useForm();
  const projectId = useProjectIdInUrl();

  const onFinish = async (values: any) => {
    // 创建时projectId需要传过去
    await addEpic({ ...values, projectId });
    props.onClose();
  };
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  useEffect(() => {
    form.resetFields();
  }, [form, props.visible]);

  return (
    <Modal
      visible={props.visible}
      onCancel={props.onClose}
      forceRender={true}
      destroyOnClose={true}
      // width={"100%"}
      footer={null}
    >
      {isLoading ? (
        <Spin size={"large"} />
      ) : (
        <>
          <h3>创建任务组</h3>
          <ErrorBox error={error} />
          <Form
            form={form}
            // layout={"vertical"}
            // style={{ width: "40rem" }}
            {...layout}
            onFinish={onFinish}
          >
            <Form.Item
              style={{ marginTop: 40 }}
              label={"任务组名称"}
              name={"name"}
              rules={[{ required: true, message: "请输入任务组名称" }]}
            >
              <Input placeholder={"请输入任务组名称"} />
            </Form.Item>
            <Form.Item
              label={"创建人"}
              name={"username"}
              rules={[{ required: true, message: "请输入创建人名称" }]}
            >
              <Input placeholder={"请输入创建人名称"} />
            </Form.Item>
            <Form.Item
              label={"联系电话"}
              name={"iphone"}
              rules={[{ required: true, message: "请输入联系电话" }]}
            >
              <Input placeholder={"请输入联系电话"} />
            </Form.Item>
            <Form.Item
              label={"备注信息"}
              name={"noice"}
              rules={[{ required: true, message: "请输入备注" }]}
            >
              <Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} />
            </Form.Item>
            <Form.Item style={{ textAlign: "right", marginRight: -200 }}>
              <Button loading={isLoading} type={"primary"} htmlType={"submit"}>
                提交
              </Button>
            </Form.Item>
          </Form>
        </>
      )}
    </Modal>
  );
};

const Container = styled.div`
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;
